<link href="/classico/public/assets/all-site/css/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<link href="/classico/public/assets/front-end/css/user/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/classico/public/assets/all-site/js/jquery-ui.min.js"></script>
<div class="system-messages">
    <ul></ul>
</div>
<div id="user-input-form">
    <div id="form-title">USER REGISTER</div>
    <div id="form-content">
        <form id="register-form" action="/classico/public/user/register" method="post">
            <table>
                <tr>
                    <td><label for="username">Username</label></td>
                    <td>
                        <input id="username" type="text" name="username"
                               value="<?= $this->username ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td>
                        <input id="email" type="text" name="email"
                               value="<?= $this->email ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="password">Password</label></td>
                    <td>
                        <input id="password" type="password" name="password"
                               value="<?= $this->password ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="confirm">Confirm</label></td>
                    <td>
                        <input id="confirm" type="password" name="confirm"
                               value="<?= $this->password ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="real-name">Real Name</label></td>
                    <td>
                        <input id="real-name" type="text" name="realName"
                               value="<?= $this->realName ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="birthday">Birthday</label></td>
                    <td>
                        <input id="birthday" type="text" name="birthday"
                               value="<?= $this->birthday ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="mobile-phone">Mobile Phone</label></td>
                    <td>
                        <input id="mobile-phone" type="text" name="mobilePhone"
                               value="<?= $this->mobilePhone ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="captcha-word">Captcha</label></td>
                    <td>
                        <input id="captcha-id" type="hidden" name="captchaID"
                               value="<?= $this->captchaID ?>"/>
                        <input id="captcha-word" type="text" name="captchaWord"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
            </table>
            <div id="captcha"><?= $this->captcha ?></div>
            <input type="hidden" name="isPost" value=""/>
            <input type="submit" value="Register"/>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#birthday').datepicker({
            dateFormat: 'dd - mm - yy'
        });
    });
</script>
<script type="text/javascript">
    var content = '';

    <?php
    foreach ($this->messages as $message) :
     ?>
    content = content + '<?= $message ?>, ';
    <?php
    endforeach
     ?>

    if (content) {
        content = content.substr(0, content.length - 2);
        $('.system-messages > ul').html('<li>' + content + '</li>');
    }
</script>
<script type="text/javascript">
    function validateEmail(email) {
        var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return re.test(email);
    }

    var registerForm = $('#register-form');
    registerForm.submit(function () {
        var usernameTrAlertsTag = $('#username').parents('tr').find('.alerts');
        var emailTrAlertsTag = $('#email').parents('tr').find('.alerts');
        var passwordTrAlertsTag = $('#password').parents('tr').find('.alerts');
        var confirmTrAlertsTag = $('#confirm').parents('tr').find('.alerts');
        var realNameTrAlertsTag = $('#real-name').parents('tr').find('.alerts');
        var birthdayTrAlertsTag = $('#birthday').parents('tr').find('.alerts');
        var mobilePhoneTrAlertsTag = $('#mobile-phone').parents('tr').find('.alerts');
        var captchaWordTrAlertsTag = $('#captcha-word').parents('tr').find('.alerts');

        usernameTrAlertsTag.html('');
        emailTrAlertsTag.html('');
        passwordTrAlertsTag.html('');
        confirmTrAlertsTag.html('');
        realNameTrAlertsTag.html('');
        birthdayTrAlertsTag.html('');
        mobilePhoneTrAlertsTag.html('');
        captchaWordTrAlertsTag.html('');

        var validInfo = true;
        var username = $('#username').val().trim();
        var email = $('#email').val().trim();
        var password = $('#password').val();
        var confirm = $('#confirm').val();
        var realName = $('#real-name').val().trim();
        var birthday = $('#birthday').val();
        var mobilePhone = $('#mobile-phone').val();
        var captchaWord = $('#captcha-word').val().trim();
        if (!username || !email || !password || !confirm || !realName
            || !birthday || !mobilePhone || !captchaWord) {
            if (!username) {
                usernameTrAlertsTag.append(
                    '<span class="alert">username must not be blank</span>'
                );
            }
            if (!email) {
                emailTrAlertsTag.append(
                    '<span class="alert">email must not be blank</span>'
                );
            }
            if (!password) {
                passwordTrAlertsTag.append(
                    '<span class="alert">password must not be blank</span>'
                );
            }
            if (!confirm) {
                confirmTrAlertsTag.append(
                    '<span class="alert">confirm must not be blank</span>'
                );
            }
            if (!realName) {
                realNameTrAlertsTag.append(
                    '<span class="alert">real name must not be blank</span>'
                );
            }
            if (!birthday) {
                birthdayTrAlertsTag.append(
                    '<span class="alert">birthday must not be blank</span>'
                );
            }
            if (!mobilePhone) {
                mobilePhoneTrAlertsTag.append(
                    '<span class="alert">mobile phone must not be blank</span>'
                );
            }
            if (!captchaWord) {
                captchaWordTrAlertsTag.append(
                    '<span class="alert">captcha must not be blank</span>'
                );
            }

            validInfo = false;
        }

        if (!validateEmail(email)) {
            emailTrAlertsTag.append(
                '<span class="alert">email is invalid</span>'
            );

            validInfo = false;
        }

        return validInfo;
    });
</script>